<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>

    <style>

        span{
            margin-left: 600px;
            color: rebeccapurple;
            font-size: 30px;
        }
        div img{
            height: 20%;
            width: 20%;
            border: white 3px solid;
        }
        .d1{
            width: 1000px;
            height: 500px;
            margin: 50px auto;
            border: white 5px solid;
            position: relative;
        }
        .d1 img{
            z-index:1;
            position: absolute;
        }
        .d1 img:hover{
            z-index:2;
            box-shadow: 5px 5px 5px #ddd;
            transform: rotate(10deg) scale(1.5);
        }


        div img:nth-of-type(1){
            top: 100px;
            left: 300px;
            transform: rotate(25deg);
        }
        div img:nth-of-type(2){
            top: 200px;
            left: 200px;
            transform: rotate(0deg);
        }

        div img:nth-of-type(3){
            top: 300px;
            left: 400px;
            transform: rotate(-33deg);
        }

        div img:nth-of-type(4){
            top: 150px;
            left: 500px;
            transform: rotate(52deg);
        }

        div img:nth-of-type(5){
            top: 250px;
            left: 400px;
            transform: rotate(-35deg);
        }

        div img:nth-of-type(6){
            top: 180px;
            left: 350px;
            transform: rotate(-15deg);
        }

        div img:nth-of-type(7){
            top: 280px;
            left: 150px;
            transform: rotate(33deg);
        }

        div img:nth-of-type(8){
            top: 330px;
            left: 650px;
            transform: rotate(-45deg);
        }

        div img:nth-of-type(9){
            top: 260px;
            left: 550px;
            transform: rotate(-25deg);
        }

        div img:nth-of-type(10){
            top: 160px;
            left: 666px;
            transform: rotate(45deg);
        }



    </style>



</head>
<body>
<span>照片墙</span>
    <div class="d1">
        <img src="images/1.jpg">
        <img src="images/2.jpg">
        <img src="images/3.jpg">
        <img src="images/4.jpg">
        <img src="images/5.jpg">
        <img src="images/6.jpg">
        <img src="images/7.jpg">
        <img src="images/8.jpg">
        <img src="images/9.jpg">
        <img src="images/10.jpg">
    </div>


</ul>
</body>
</html>